<!--
*** Created by zhumin on 2023/12/19 ***
*** Description: 页面整体布局
-->

<template>
  <div class="echo-layout">
    <transition name="animate_router">
      <el-container v-show="pageShow">
        <!-- 左侧导航栏 -->
        <el-aside height="100%" width="auto">
          <div class="side-bar-title">
            <img src="../assets/img/logo-default.png" alt="" height="32px" />
            <span v-if="!isCollapse" class="title-text">{{ $t('Title') }}</span>
          </div>
          <side-bar
            :isCollapse="isCollapse"
            :menus="navMenus"
            :url="url"
            :title="title"
            @getMenuData="getMenuData"
          ></side-bar>
        </el-aside>
        <el-container class="echo-container">
          <!-- 右侧标题栏 -->
          <el-header>
            <div class="echo-header">
              <div class="header-left">
                <el-icon @click="changeCollapse()" size="24">
                  <Fold v-if="!isCollapse" />
                  <Expand v-else />
                </el-icon>
                {{ $t(pageTitle) }}
              </div>
              <div class="header-right">
                <common-config @getCurLang="getCurLang"></common-config>
              </div>
            </div>
          </el-header>
          <!-- 右侧内容部分 -->
          <el-main>
            <el-config-provider :locale="curLang">
              <router-view v-slot="{ Component }">
                <transition name="echo-container_router">
                  <component :is="Component" />
                </transition>
              </router-view>
            </el-config-provider>
          </el-main>
        </el-container>
      </el-container>
    </transition>
  </div>
</template>

<script setup>
// 引入自定义主题
import Config from '../assets/js/config'
// 引入左侧导航栏
import SideBar from '../components/sideBar.vue'
import commonConfig from '../components/commonConfig.vue'

import Storage from './../assets/js/storage.js'
import useStore from '../store'

const useCommon = useStore.useCommonStore()

const curLang = ref(useCommon.messages[useCommon.locale].el)

const { proxy } = getCurrentInstance()

// const locale = computed(() => useCommon.getLocale)

const router = useRouter()

const pageShow = ref(false)

// 导航栏参数
const isCollapse = ref(useCommon.isCollapse) //用于判断导航栏是否收缩
const pageTitle = ref('Menu.Overview')
const url = ref('/overview')
const title = ref('CVS')

// 菜单列表
const navMenus = ref(Config.navMenus)

onMounted(() => {
  getMenuData(router.path)
  pageShow.value = true
})

const changeCollapse = () => {
  useCommon.toggleCollapse()
  isCollapse.value = !isCollapse.value
}

const getCurLang = (lang) => {
  curLang.value = lang
  document.title = proxy.$t('Title');
}

// 切换菜单后获取路由标题
const getMenuData = (path) => {
  for (const menu of navMenus.value) {
    if (menu.path === path) {
      pageTitle.value = menu.title
      break
    } else {
      if (path && path.includes(menu.path) && menu.children) {
        let res = menu.children.filter((item) => item.path === path)
        pageTitle.value = res[0].title
        break
      }
    }
  }
}

watch(
  router.currentRoute,
  (newVal, oldVal) => {
    getMenuData(newVal.path)
  },
  {
    immediate: true,
  }
)
</script>

<style lang="scss">
@import '@/assets/scss/layout';
</style>
